<template>
  <test/>
  <div>
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox v-for="item in items.slice(0,4)" :key="item" :value="item" style="height: 50px;width: 150px">
        <img :src="item.imageUrl" alt="Checkbox Image" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;height: 40px;width: 80px;text-align: center">
          {{ item.label }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox v-for="item in items.slice(4,10)" :key="item" :value="item" style="height: 50px;width: 150px">
        <img :src="item.imageUrl" alt="Checkbox Image" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;height: 40px;width: 80px;text-align: center">
          {{ item.label }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox v-for="item in items.slice(10,13)" :key="item" :value="item" style="height: 50px;width: 150px">
        <img :src="item.imageUrl" alt="Checkbox Image" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;height: 40px;width: 80px;text-align: center">
          {{ item.label }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox v-for="item in items.slice(13,17)" :key="item" :value="item" style="height: 50px;width: 150px">
        <img :src="item.imageUrl" alt="Checkbox Image" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;height: 40px;width: 80px;text-align: center">
          {{ item.label }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
    <el-checkbox-group
        v-model="selectedItems"
    >
      <el-checkbox v-for="item in items.slice(17,21)" :key="item" :value="item" style="height: 50px;width: 150px">
        <img :src="item.imageUrl" alt="Checkbox Image" style="width: 40px; height: 40px;">
        <el-text size="large" style="font-size:16px;line-height:35px;height: 40px;width: 80px;text-align: center">
          {{ item.label }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <Lottery :message="selectedItems"/>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import resource from '@/assets/resource.json'
import Lottery from "@/components/lottery.vue";
import Test from "@/components/test.vue";

const selectedItems = ref([])
const items = ref([
  {value: '骑士', label: '骑士', imageUrl: '01_TANK/Job/Paladin.png'},
  {value: '战士', label: '战士', imageUrl: '01_TANK/Job/Warrior.png'},
  {value: '暗黑骑士', label: '暗黑骑士', imageUrl: '01_TANK/Job/DarkKnight.png'},
  {value: '绝枪战士', label: '绝枪战士', imageUrl: '01_TANK/Job/Gunbreaker.png'},

  {value: '武僧', label: '武僧', imageUrl: '03_DPS/Job/Monk.png'},
  {value: '龙骑士', label: '龙骑士', imageUrl: '03_DPS/Job/Dragoon.png'},
  {value: '忍者', label: '忍者', imageUrl: '03_DPS/Job/Ninja.png'},
  {value: '武士', label: '武士', imageUrl: '03_DPS/Job/Samurai.png'},
  {value: '钐镰客', label: '钐镰客', imageUrl: '03_DPS/Job/slk.png'},
  {value: '蝰蛇剑士', label: '蝰蛇剑士', imageUrl: '03_DPS/Job/Viper.png'},

  {value: '吟游诗人', label: '吟游诗人', imageUrl: '03_DPS/Job/Bard.png'},
  {value: '机工士', label: '机工士', imageUrl: '03_DPS/Job/Machinist.png'},
  {value: '舞者', label: '舞者', imageUrl: '03_DPS/Job/Dancer.png'},

  {value: '黑魔法师', label: '黑魔法师', imageUrl: '03_DPS/Job/BlackMage.png'},
  {value: '召唤师', label: '召唤师', imageUrl: '03_DPS/Job/Summoner.png'},
  {value: '赤魔法师', label: '赤魔法师', imageUrl: '03_DPS/Job/RedMage.png'},
  {value: '绘灵法师', label: '绘灵法师', imageUrl: '03_DPS/Job/pictomancer.png'},

  {value: '白魔法师', label: '白魔法师', imageUrl: '02_HEALER/Job/WhiteMage.png'},
  {value: '学者', label: '学者', imageUrl: '02_HEALER/Job/Scholar.png'},
  {value: '占星术士', label: '占星术士', imageUrl: '02_HEALER/Job/Astrologian.png'},
  {value: '贤者', label: '贤者', imageUrl: '02_HEALER/Job/xz.png'},
])

</script>
<style scoped>
</style>